<template>
	<view class="content" v-if="showPage">
		<view class="userinfo-contain">
			<image src="../../static/shop/mine/my-card.png" class="top-img"></image>
			<image :src="avatarUrl" style="z-index: 222;" class="user-avatar"></image>
			<view class="userinfo-right" style="z-index: 222;">
			<view class="user-nickname" >{{nickName}}</view>
			<view class="user-role">{{phone}}</view>
			</view>
		</view>
		<view class="afterSale-contain">
			<view class="afterSale-item" @click="hanldeClickAfter(item.title)" v-for="(item,index) in afterSale" :key="index">
				<image class="afterSale-item-icon" :src="item.icon"></image>
				<view class="afterSale-item-title">{{item.title}}</view>
				<view class="afterSale-item-dot" v-if="item.number>0">{{item.number}}</view>
			</view>
		</view>
		<view class="content-content">
			<block v-for="(item,index) in navList" :key="item.id">
				<view class="content-item"  @click="handldeClick(item)">
					<view class="content-item-left">
						<image style="width: 6vw;height: 6vw;margin-right: 20rpx;" :src="item.icon"></image>
						<view class="item-title">{{item.text}}</view>
					</view>
					<view class="content-item-left">
						<view class="item-value" style="margin-right: 20rpx;">{{item.value}}</view>
						<image class="item-icon"></image>
					</view>
				</view>
			</block>
		</view>
		 <ComponentDialog  @getPhoneOk="init" @cancle="handleClickCanclePhone" title="申请获取手机号" tips="授权手机号后方可使用小程序!" :show="showDialogPhone"></ComponentDialog>
	     <u-popup :mask-close-able="false" border-radius="54" mode="center" width="550rpx" height="300rpx"  v-model="showDialogUuid">
	     			<view class="content-title" >请先授权登录？</view>
	     			<view class="content-text">不登录无法正常体验！</view>
	     			<view class="btn-div">
	     				<!-- <navigator class="btn-cancle" open-type="exit" target="miniProgram">取消</navigator> -->
	     				<view class="btn-cancle" @click="handleClickCancleUuid">取消</view>
						<view class="line-xian"></view>
	     				<button @click="bindgetuser"  class="content-button"   type="success">确定</button>
	     			</view>
	      </u-popup>
	</view>
</template>

<script>
	import ComponentDialog from '../dialog.vue'
	import api from '../../untils/api.js'
	export default {
		data() {
			return {
				showPage:false,
				showDialogPhone:false,
				showDialogUuid:false,
				orderList:[],
				couponList:[],
				afterSale: [
				        {
				          title: "待付款",
				          icon: require("@/static/shop/mine/paid.png"),
						  number:0,
				        },
				        {
				          title: "待发货",
				          icon: require("@/static/shop/mine/delivery.png"),
						  number:0,
				        },
				        {
				          title: "待收货",
				          icon: require("@/static/shop/mine/received.png"),
						  number:0,
				        },
				        {
				          title: "已完成",
				          icon: require("@/static/shop/mine/completed.png"),
						  number:0,
				        },
				      ],
				navList:[
					{text:"我的优惠劵",id:11,value:'',icon:require("@/static/shop/mine/coupon.png")},
					{text:"收货地址",id:22,value:'',icon:require("@/static/shop/mine/place.png")},
					{text:"关于我们",id:33,value:'',icon:require("@/static/shop/mine/about-us.png")},
					{text:"联系我们",id:44,value:4006669918,icon:require("@/static/shop/mine/talk-us.png")},
				],
				avatarUrl:"",
				nickName:"",
				phone:"",
				openid:"",
				userId:0,
			}
		},
		components: {
		     ComponentDialog
		  },
		  onShareAppMessage(res) {
		     return {
		       title: "氢启健康商城",
		       path: `/pages/index/index`
		     }
		   },
		   onHide() {
		   	this.showPage=false;
		   },
		   onShow() {
			   this.openid=uni.getStorageSync("openid")
			   this.phone=uni.getStorageSync("phone")
			   if(!uni.getStorageSync("uUID")){
				   this.showPage=true;
				  this.showDialogUuid=true
				  uni.hideTabBar()
			   }
			   else {
				   if(this.phone){
					  this.init();
				   }
				   else {
					this.showPage=true;
					this.showDialogPhone=true;
					 uni.hideTabBar();
				   }
			   }
		   },
		methods: {
			async init(){
				this.showPage=false;
				uni.showLoading({
					title:"加载中"
				});
				await api.SM_ORDER_LIST(JSON.stringify({nowPage: 1, pageSize: 9999, startRecord: 0, parameters: {}, condition: {oredCriteria: [[]]}})).then((res)=>{
					const promise1=api.SM_ORDER_LIST(JSON.stringify({nowPage: 1, pageSize: 9999, startRecord: 0, parameters: {}, condition: {oredCriteria: [[]]}}));
					const promise2=api.BIZ_USER_PROFILE_SELECT_BY_USER_ID();
					const promise3=api.SM_SHOPPING_CART_LIST(JSON.stringify({nowPage: 1, pageSize: 9999, startRecord: 0, parameters: {}, condition: {oredCriteria: [[]]}}));
					 Promise.all([promise1, promise2, promise3]).then((res) => {
					     this.getOrderList(res[0]);
						 this.getPersonInfo(res[1]);
						 this.showCarNumber(res[2]);
						 uni.hideLoading();
						 this.showPage=true;
					 })
				})
		     },
			getOrderList(res){
				        this.orderList=res.data.body.exhibitDatas;
					    this.dataList=[[], [], [], [], [], [], [], []];
					   for (const index of this.orderList) {
					    	this.dataList[6].push(index); // 全部订单
					    switch (index.state) {
					    	 case 0:
					    	this.dataList[0].push(index);
					    	break; // 已取消
					    	 case 1:
					    	this.dataList[1].push(index);
					    	break; // 未付款
					    	case 2:
					    	this.dataList[1].push(index);
					        break; // 未付款
					    	case 3:
					    	this.dataList[2].push(index);
					    	break; // 待发货
					    	case 4:
					    	this.dataList[3].push(index);
					    	break; // 已发货
					    	case 5:
					    	this.dataList[4].push(index);
					    	break; // 已完成
					    	case 6:
					        this.dataList[4].push(index);
					    	break; // 已完成
					        }
					 }
				this.afterSale[0].number=this.dataList[1].length;
				this.afterSale[1].number=this.dataList[2].length;
				this.afterSale[2].number=this.dataList[3].length;
				this.afterSale[3].number=this.dataList[4].length;
			},
			getPersonInfo(res){
				this.nickName=res.data.body.realName
				this.avatarUrl=res.data.body.photoUrl
				this.userId=res.data.body.id
				this.phone=res.data.body.phone
				if(res.data.body.isSmShare===1&&this.navList[0].text!=="推广中心"){
					this.navList.unshift({text:"推广中心",id:8797987,value:'',icon:require("@/static/shop/mine/cuopon_extension.png")})
				}
			},
			showCarNumber(res){
				var list=res.data.body.exhibitDatas.filter(item=>item.model.stock>0);
					  if(list.length>0){
						  uni.setTabBarBadge({
						    index: 1,
						    text: String(list.length),
						  })
					  }
			},
			handleClickCancleUuid(){
				this.showDialogUuid=false
				uni.showTabBar()
				uni.switchTab({
					url:"../index/index"
				})
			},
			bindgetuser(){
			uni.getUserProfile({desc:"信息将用于服务",lang:"zh_CN"}).then((res)=>{
					  if(res[1]){
						    			   uni.setStorageSync("userInfo",res[1].userInfo)
						    			   let userinfo=res[1].userInfo
						    			 userinfo.openId=uni.getStorageSync("openid")
						    			 userinfo.signature=res[1].signature
						    	    userinfo.encryptedData=res[1].encryptedData
						    		 userinfo.iv=res[1].iv
									 userinfo.key="ZHQQ_SM"
						    		 console.log(userinfo)
						    		api.register(JSON.stringify(userinfo)).then((res)=>{
						    			  uni.showTabBar()
						    		      this.showDialogUuid=false
						    	 }).catch((res)=>{
						    					  })
						            }else {
						    								  uni.showToast({
						    								    title: '拒绝授权将无法正常使用哦',
						    								    icon: 'none',
						    								    duration: 2000
						    								  })
						    							  }
						    			}) 
			},
			handleClickCanclePhone(){
				this.showDialogPhone=false
				uni.showTabBar()
			},
			handldeClick(item){
				if(uni.getStorageSync("phone")){
					if(item.text==="推广中心"){
						uni.navigateTo({
							url:`../promotionCenter/promotionCenter?userid=${this.userId}`
						})
					}
					if(item.text==="我的优惠劵"){
						uni.navigateTo({
							url:"../coupon/coupon"
						})
					}
					if(item.text==="收货地址"){
						uni.navigateTo({
							url:"../address/address"
						})
					}
					if(item.text==="关于我们"){
						uni.navigateTo({
							url:"../aboutUs/aboutUs"
						})
					}
					if(item.text==="联系我们"){
						uni.makePhoneCall({
						    phoneNumber: '4006669918' 
						})
					}
				}
				else {
					this.showDialogPhone=true
					uni.hideTabBar()
				}
				
			},
			hanldeClickAfter(name){
				if(uni.getStorageSync("phone")){
					uni.navigateTo({
						url:`../saleAfter/saleAfter?name=${name}&dataList=${JSON.stringify(this.dataList)}`
					})
				}
				else {
					this.showDialogPhone=true
					uni.hideTabBar()
				}
			}
		},
	}
</script>

<style scoped>
	.afterSale-item-dot{
		width: 5vw;
		height: 5vw;
		line-height: 5vw;
		font-size: 4vw;
		border-radius: 50%;
		background: red;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 0rpx;
		right: 5rpx;
	}
	.content-item-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.afterSale-item-icon{
		width: 11vw;
		height: 11vw;
		margin-bottom: 20rpx;
	}
	.afterSale-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		position: relative;
	}
	.afterSale-contain{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 674rpx;
		height: 255rpx;
		background: #fff;
		margin: 0 auto;
		border-radius: 20rpx;
	}
	.line-xian{
		width: 1rpx;
		height: 100%;
		background: #a3a3a3;
	}
	.btn-cancle{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.btn-div{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 100rpx;
	}
	.content-title{
		width: 100%;
		text-align: center;
		padding-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		color: #000000;
		font-weight: 500;
	}
	.content-text{
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #303133;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #a3a3a3;
	}
	 button::after { border: none; }
	.content-button{
	  width: 50%;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color: #303133;
	  background-color:#FFFFFF;
	}
	@media screen and (-webkit-max-device-pixel-ratio: 2){
	  .item-icon{
		background-image: url(../../static/2/enter.png);
	    background-size: 20rpx 36rpx;
	  	width: 20rpx;
	  	height: 36rpx;
		background-repeat: no-repeat;
	  }
	}
	@media screen and (-webkit-min-device-pixel-ratio: 2.01){
	 .item-icon{
	 		background-image: url(../../static/3/enter.png);
	     background-size: 20rpx 36rpx;
	 	  width: 20rpx;
	 	height: 36rpx;
	 background-repeat: no-repeat;
	 }
	}
	.item-title{
		font-size: 30rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #4D4D4D;
	}
	.content-item{
		width: 100%;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #E1E1E1;
	}
	.content-item::after{
		border: none;
	}
	.content-content{
		width: 680rpx;
		background: #fff;
		padding: 15rpx 30rpx;
	    margin: 0 auto;
		box-sizing: border-box;
		margin-top: 40rpx;
		border-radius: 20rpx;
	}
	.user-role{
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	.user-nickname{
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-bottom: 40rpx;
	}
	.userinfo-right{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.user-avatar{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 2px #fff solid;
		overflow: hidden;
		margin-right: 30rpx;
	}
	.userinfo-contain{
		position: relative;
		padding-left: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 674rpx;
		height: 255rpx;
		box-shadow: 0rpx 8rpx 9rpx 1rpx rgba(145, 145, 145, 0.35), 0rpx 4rpx 5rpx 0rpx rgba(145, 145, 145, 0.32);
		border-radius: 20rpx;
		margin: 45rpx auto;
	}
	.top-img{
		width: 674rpx;
		height: 255rpx;
		border-radius: 20rpx;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 0;
	}
     .title{
     	position: fixed;
     	top: 0rpx;
     	left: 0rpx;
     	box-sizing: border-box;
     	padding-top: 5vh;
     	padding-bottom: 30rpx;
     	font-size: 36rpx;
     	font-family: Source Han Sans SC;
     	font-weight: 400;
     	color: #3C3C3C;
     	text-align: center;
     	width: 100vw;
     	z-index: 999;
     	background: #FFFFFF;
     }
     .content {
     	width: 100vw;
     	min-height: 100vh;
     	display: flex;
     	flex-direction: column;
     	align-items: center;
		background: rgb(245,247,249);
     }
</style>
